<template>
	<view class="suggestions_class">
		<view class="nav-class">
			<u-navbar title="建议反馈" :safeAreaInsetTop="false" bgColor="transparent">
				<view class="u-nav-slot" slot="right"></view>
			</u-navbar>
		</view>
		<view class="nav-center"><view class="nav-center-text">感谢您的反馈与建议，我们会积极改进，优化不足</view></view>
		<view class="loan_box">
			<view class="loan_list">
				<view class="list_item">
					<view class="item_bottom flex">
						<view class="bottom_item">
							<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelAlign="left">
								<u-form-item label="投诉对象 ＊" prop="userInfo.sex" ref="item1" labelWidth="100">
									<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
							</u--form>
						</view>
					</view>
				</view>
			</view>
			<view class="loan_list">
				<view class="list_item">
					<view class="tab_title">填写投诉信息</view>
					<view class="item_bottom flex">
						<view class="bottom_item">
							<u--input type="textarea" v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btm_class"><u-button class="btn_class" shape="square">提交</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			textList: [],
			model1: { userInfo: '' },
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				},
				{
					name: '保密'
				}
			]
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name;
			this.$refs.uForm.validateField('userInfo.sex');
		}
	}
};
</script>

<style>
:root {
	--nut-card-left-background-color: #fff;
}
</style>
<style lang="scss" scoped>
.suggestions_class {
	background: #f7f8fa;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 28rpx;
	color: #000000;
	line-height: 33rpx;
	font-style: normal;
	text-transform: none;
	position: absolute;
	height: 100%;
	width: 100%;

	background-image: url(../../static/suggested/bg_建议反馈@2x.png);
	background-repeat: no-repeat;
	background-size: 498rpx 494rpx;
	background-position: top right;
}
.btn_class_1 {
	margin-left: 30rpx;
}
.loan_box {
	width: 90%;
	margin: 50rpx auto;
	border-radius: 20rpx;

	box-sizing: border-box;

	.loan_list {
		background-color: #fff;
		height: 98rpx;
		line-height: 40rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		.list_item {
			padding: 0 10rpx;
		}
	}
	.loan_list:last-child {
		margin-top: 20rpx;
	}
	.u-form-item__body {
		padding: 26rpx 0;
	}
}
.nav-center {
	margin: 0 30rpx;
	margin-top: 80rpx;

	height: 82rpx;
	background: rgba(255, 255, 255, 0.56);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.nav-center-text {
	height: 68rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #243a72;
	padding: 20rpx;
	line-height: 40rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.tab_title {
	font-weight: bold;
	font-size: 28rpx;
	color: #22150b;
	padding-top: 20rpx;
	line-height: 40rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.nav-class {
	position: relative;
	margin-top: 100rpx;
}
.row-flex {
	justify-content: space-between;
}
.flex {
	display: flex;
}
.btm_class {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 184rpx;
	background: #ffffff;
	box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(236, 225, 214, 0.34);
}
.btn_class {
	font-weight: 800;
	font-size: 28rpx;
	color: #22150b;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-top: 20rpx;
	width: 686rpx;
	height: 88rpx;
	background: #fdd637;
	border-radius: 100rpx 100rpx 100rpx 100rpx;
}
</style>
